import React from "react";

export default class FormDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      value: "",
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    console.log(this.state.value);
    event.preventDefault(); //阻止表单默认的跳转事件
  }

  render() {
    return (
      <div>
        {/* 受控组件--值通过state管理
            在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。
            而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新
        */}
        <form onSubmit={this.handleSubmit}>
          <label>
            名字:
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="提交" />
        </form>

      {/*  非受控组件：受控组件需要多个input声明多个state属性，不方便 因此react提供了替代方案
           不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据
      */}
      </div>
    );
  }
}
